<!-- 相册详情 -->
<template>
  <div class="warp">
    <Header />
    <ImageList />
    <Pagination
      :current="photoCurrent"
      :total="photoTotal"
      :defaultPageSize="photoSize"
      :pageChange="pageChange"
      :sizeChange="sizeChange"
    />
  </div>
</template>

<script>
import Header from './components/header'
import ImageList from './components/list'
import Pagination from '../components/pagination'
import { mapActions, mapGetters, mapMutations } from 'vuex'
export default {
  components: {
    Header,
    ImageList,
    Pagination
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['photoTotal', 'photoCurrent', 'photoSize'])
  },
  watch: {},
  methods: {
    ...mapActions(['SetAlbumId', 'GetPhotoAlbumDetail', 'GetPhoto', 'GetGroupList']),
    ...mapMutations(['SET_PHOTOCURRENT', 'SET_PHOTOSIZE']),
    pageChange(current, size) {
      this.SET_PHOTOCURRENT(current)
      this.GetPhoto()
      this.SET_PHOTOSIZE(size)
    },
    sizeChange(current, size) {
      this.SET_PHOTOCURRENT(1)
      this.SET_PHOTOSIZE(size)
      this.GetPhoto()
    }
  },
  created() {
    this.SET_PHOTOCURRENT(1)
    this.SET_PHOTOSIZE(40)
    this.SetAlbumId(this.$route.query.albumId)
    this.GetPhotoAlbumDetail()
    this.GetPhoto()
    this.GetGroupList()
    // console.log('route--->', this.$route.query.belongId)
  },
  mounted() {}
}
</script>
<style scoped lang="less">
.warp {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 20px;
}
</style>
